import { View } from "@tarojs/components";
import { AbstractSlider, AbstractImage } from "@/components";
import { SchoolShape } from "@/data/about/aboutTypes";
import style from "./index.module.scss";

type SchoolListingProps = {
  schools: SchoolShape[];
  onShowDetailsClickCb: React.Dispatch<
    React.SetStateAction<SchoolDetailSubset | null>
  >;
};

export type SchoolDetailSubset = Pick<
  SchoolShape,
  "name" | "address" | "telephone" | "website" | "image"
>;

const SchoolItem = ({
  iconPath,
  name,
  onShowDetailsClickCb,
}: SchoolShape & {
  onShowDetailsClickCb: () => void;
}) => {
  return (
    <View className={style["school-item"]} onClick={onShowDetailsClickCb}>
      <AbstractImage
        src={iconPath}
        className={style["school-icon"]}
        type="none"
      />
      <View className={style["school-name"]}>{name}</View>
      <View className={style["school-link-text"]}>查看更多</View>
    </View>
  );
};

const C28SchoolListing = ({
  schools,
  onShowDetailsClickCb,
}: SchoolListingProps) => {
  return (
    <View className={style["school-listing"]}>
      <View className={style["category-title"]}>永久中心</View>
      <View className={style["school-list"]}>
        {schools
          .filter((school) => school.type === "永久中心")
          .map((school) => (
            <SchoolItem
              key={school.id}
              {...school}
              onShowDetailsClickCb={() => {
                onShowDetailsClickCb({
                  name: school.name,
                  address: school.address,
                  telephone: school.telephone,
                  website: school.website,
                  image: school.image,
                });
              }}
            />
          ))}
      </View>
      <View className={style["category-title"]}>海外中心</View>
      <View className={style["school-list"]}>
        <AbstractSlider themeColor="#000">
          {schools
            .filter((school) => school.type === "海外中心")
            .map((school) => (
              <SchoolItem
                key={school.id}
                {...school}
                onShowDetailsClickCb={() => {
                  onShowDetailsClickCb({
                    name: school.name,
                    address: school.address,
                    telephone: school.telephone,
                    website: school.website,
                    image: school.image,
                  });
                }}
              />
            ))}
        </AbstractSlider>
      </View>
    </View>
  );
};

export default C28SchoolListing;
